<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-20 01:48
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div class="x-render-layout-steps-container">
    <a-steps v-bind="attrs" v-model="attrs.current" style="margin-bottom: 8px">
      <template v-for="(item,index) in children">
        <a-step :key="item.code" :title="item.title" v-bind="item" @click.stop.prevent="current = index"></a-step>
      </template>
    </a-steps>
    <template v-for="(item,index) in children">
      <x-render-draggable
        v-show="index === current"
        active
        :current-id="xDesignForm.currentId"
        :form-data="xRenderForm.formData"
        :list="item.children"
        :component="xDesignForm.getComponent"
        @add="designAddHandler($event, item.children)"
        @end="designMoveEndHandler($event, item.children)"
        @copy="designCopyHandler"
        @remove="designRemoveHandler"
        @selected="designSelectedHandler"
        @data-change="dataChangeHandler($event,item)"
      >
      </x-render-draggable>
    </template>
  </div>
</template>

<script>
import { COMPONENT_TYPE, CUSTOM_EVENT_TYPE, DESIGN_COMPONENT_SUFFIX } from '../../constants'
import XRenderDesignMixin from '../../XRenderMixins/XRenderDesignMixin'
import XRenderComponentMixin from '../../XRenderMixins/XRenderComponentMixin'
import { cloneDeep } from 'lodash'
import {getFormOption} from '../../utils'

export default {
  name: COMPONENT_TYPE.LAYOUT_STEPS + DESIGN_COMPONENT_SUFFIX,
  mixins: [XRenderDesignMixin, XRenderComponentMixin],
  data() {
    return {
      current: 0
    }
  },
  computed: {
    children: {
      get() {
        const { attrs } = this
        return attrs.children || []
      }
    }
  },
  methods: {
    dataChangeHandler(list, child) {
      const { attrs, xDesignForm, id, isDebug } = this
      const formOption = getFormOption(xDesignForm.formOptions, id)
      if (!formOption) {
        isDebug ? console.warn('未找到表单项') : ''
        return
      }
      const attrsTmp = cloneDeep(attrs)
      const tabIndex = attrsTmp.children.findIndex(o => !!o.code && !!child.code && o.code === child.code)
      if (tabIndex !== -1) {
        child = cloneDeep(child)
        child.children = child.children || []
        child.children.splice(0, child.children.length, ...list)
        attrsTmp.children.splice(tabIndex, 1, child)
        this.$set(formOption, 'attrs', attrsTmp)
      }
    }
  },
  mounted() {
    const { attrs } = this
    this.current = attrs.current || 0
  }
}
</script>

<style scoped lang="css">
.x-render-layout-steps-container {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  background-color: #fff;
}
</style>
